Funkcije CSS Grid Track: Obvladovanje dinamičnega določanja velikosti postavitve

CSS Grid je zmogljiv sistem postavitve, ki spletnim razvijalcem omogoča preprosto ustvarjanje zapletenih in odzivnih zasnov. V središču prilagodljivosti CSS Grida so njegove funkcije track. Te funkcije, vključno z fr, minmax(), auto in fit-content(), zagotavljajo mehanizme za dinamično določanje velikosti grid trackov (vrstic in stolpcev). Razumevanje teh funkcij je ključno za obvladovanje CSS Grida in ustvarjanje postavitev, ki se brezhibno prilagajajo različnim velikostim zaslona in variacijam vsebine.

Razumevanje grid trackov

Preden se poglobimo v specifične funkcije trackov, je bistveno razumeti, kaj so grid tracki. Grid track je prostor med dvema grid črtama. Stolpci so navpični tracki, vrstice pa so vodoravni tracki. Velikost teh trackov določa, kako se vsebina porazdeli znotraj grida.

Enota fr: Frakcijski prostor

Enota fr predstavlja del razpoložljivega prostora v grid posodi. Je zmogljivo orodje za ustvarjanje prilagodljivih postavitev, kjer si stolpci ali vrstice proporcionalno delijo preostali prostor. Pomislite na to kot na način delitve razpoložljivega prostora, potem ko so upoštevani vsi drugi tracki fiksne velikosti.

Kako deluje fr

Ko določite velikost grid tracka z uporabo fr, brskalnik izračuna razpoložljivi prostor tako, da odšteje velikost vseh trackov fiksne velikosti (npr. pikslov, emov) od skupne velikosti grid posode. Preostali prostor se nato razdeli med enote fr glede na njihova razmerja.

Primer: Enaki stolpci

Če želite ustvariti tri stolpce enake širine, lahko uporabite naslednji CSS:

            .grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

            

              
                Copy
              
            
          

Ta koda enakomerno razdeli razpoložljivi prostor med tri stolpce. Če je grid posoda široka 600px, bo vsak stolpec širok 200px (ob predpostavki, da ni vrzeli ali obrob).

Primer: Proporcionalni stolpci

Če želite ustvariti stolpce z različnimi razmerji, lahko uporabite različne vrednosti fr:

            .grid-container {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
}

            

              
                Copy
              
            
          

V tem primeru bo prvi stolpec zavzel dvakrat toliko prostora kot druga dva stolpca. Če je grid posoda široka 600px, bo prvi stolpec širok 300px, druga dva stolpca pa bosta široka po 150px.

Praktična uporaba: Odzivna postavitev stranske vrstice

Enota fr je še posebej uporabna za ustvarjanje odzivnih postavitev stranske vrstice. Razmislite o postavitvi s stransko vrstico fiksne širine in prilagodljivim območjem glavne vsebine:

            .grid-container {
  display: grid;
  grid-template-columns: 200px 1fr;
}

.sidebar {
  /* Slogi stranske vrstice */
}

.main-content {
  /* Slogi glavne vsebine */
}

            

              
                Copy
              
            
          

V tej nastavitvi bo stranska vrstica vedno široka 200px, medtem ko se bo območje glavne vsebine razširilo, da zapolni preostali prostor. Ta postavitev se samodejno prilagaja različnim velikostim zaslona in zagotavlja, da se vsebina vedno prikaže optimalno.

Funkcija minmax(): Omejitve prilagodljive velikosti

Funkcija minmax() določa obseg sprejemljivih velikosti za grid track. Sprejme dva argumenta: najmanjšo in največjo velikost.

            minmax(min, max)

            

              
                Copy
              
            
          

Grid track bo vedno vsaj minimalne velikosti, vendar se lahko poveča do največje velikosti, če je na voljo prostor. Ta funkcija je neprecenljiva pri ustvarjanju odzivnih postavitev, ki se prilagajajo različnim dolžinam vsebine in velikostim zaslona.

Primer: Omejevanje širine stolpca

Če želite zagotoviti, da stolpec nikoli ne postane preozek ali preširok, lahko uporabite minmax():

            .grid-container {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 1fr;
}

            

              
                Copy
              
            
          

V tem primeru bo prvi stolpec širok vsaj 200px, vendar se lahko poveča, da zapolni razpoložljivi prostor, do frakcije preostalega prostora, ki ga določa 1fr. To preprečuje, da bi stolpec postal preozek na majhnih zaslonih ali pretirano širok na velikih zaslonih. Drugi stolpec zavzame preostali prostor kot frakcija.

Primer: Preprečevanje prelivanja vsebine

minmax() se lahko uporabi tudi za preprečevanje prelivanja vsebine izven posode. Razmislite o scenariju, ko imate stolpec, ki bi moral sprejeti spremenljivo količino besedila:

            .grid-container {
  display: grid;
  grid-template-columns: 100px minmax(150px, auto) 100px;
}

            

              
                Copy
              
            
          

Tukaj bo srednji stolpec širok vsaj 150px. Če vsebina zahteva več prostora, se bo stolpec razširil, da jo bo sprejel. Ključna beseda auto kot največja vrednost pove tracku, naj se prilagodi glede na vsebino znotraj, kar zagotavlja, da se vsebina nikoli ne preliva. Dva stolpca na straneh ostaneta fiksne širine 100px.

Praktična uporaba: Odzivna galerija slik

Razmislite o ustvarjanju galerije slik, kjer želite prikazati slike v vrstici, vendar želite zagotoviti, da ne postanejo premajhne na majhnih zaslonih ali prevelike na velikih zaslonih:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-gap: 10px;
}

.grid-item {
  /* Slogi slike */
}

            

              
                Copy
              
            
          

repeat(auto-fit, minmax(150px, 1fr)) je zmogljiva kombinacija. auto-fit samodejno prilagodi število stolpcev glede na razpoložljivi prostor. minmax(150px, 1fr) zagotavlja, da je vsaka slika široka vsaj 150px in se lahko poveča, da zapolni razpoložljivi prostor. To ustvari odzivno galerijo slik, ki se prilagaja različnim velikostim zaslona in zagotavlja dosledno izkušnjo gledanja. Razmislite o dodajanju object-fit: cover; v CSS .grid-item, da zagotovite, da slike pravilno zapolnijo prostor brez popačenja.

Ključna beseda auto: Velikost na podlagi vsebine

Ključna beseda auto naroči gridu, naj prilagodi velikost tracka glede na vsebino v njem. Track se bo razširil, da se prilega vsebini, vendar se ne bo skrčil manj kot najmanjša velikost vsebine.

Kako deluje auto

Ko uporabljate auto, se velikost grid tracka določi z notranjo velikostjo vsebine v njem. To je še posebej uporabno za scenarije, kjer je velikost vsebine nepredvidljiva ali spremenljiva.

Primer: Prilagodljiv stolpec za besedilo

Razmislite o postavitvi, kjer imate stolpec, ki mora sprejeti spremenljivo količino besedila:

            .grid-container {
  display: grid;
  grid-template-columns: 200px auto 1fr;
}

            

              
                Copy
              
            
          

V tem primeru je prvi stolpec fiksne širine 200px. Drugi stolpec je nastavljen na auto, zato se bo razširil, da se prilega besedilni vsebini v njem. Tretji stolpec izkorišča preostali prostor kot frakcijo in je prilagodljiv.

Primer: Vrstice s spremenljivo višino

auto lahko uporabite tudi za vrstice. To je uporabno, če imate vrstice z vsebino, ki se lahko razlikuje po višini:

            .grid-container {
  display: grid;
  grid-template-rows: auto auto auto;
}

            

              
                Copy
              
            
          

V tem primeru bo vsaka vrstica samodejno prilagodila svojo višino, da bo sprejela vsebino v njej. To je uporabno za ustvarjanje postavitev z dinamično vsebino, kot so objave v spletnem dnevniku ali članki z različnimi količinami besedila in slik.

Praktična uporaba: Odzivni navigacijski meni

auto lahko uporabite za ustvarjanje odzivnega navigacijskega menija, kjer se širina vsakega elementa menija prilagodi glede na njegovo vsebino:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, auto);
  grid-gap: 10px;
}

.menu-item {
  /* Slogi elementa menija */
}

            

              
                Copy
              
            
          

Uporaba repeat(auto-fit, auto) bo ustvarila toliko stolpcev, kot jih je potrebno za prileganje elementom menija, pri čemer se širina vsakega elementa določi z njegovo vsebino. Ključna beseda auto-fit zagotavlja, da se elementi na manjših zaslonih zavijejo v naslednjo vrstico. Ne pozabite tudi oblikovati menu-item za pravilen prikaz in estetiko.

Funkcija fit-content(): Omejevanje velikosti na podlagi vsebine

Funkcija fit-content() omogoča omejevanje velikosti grid tracka glede na njegovo vsebino. Sprejme en argument: največjo velikost, ki jo lahko track zavzame. Track se bo razširil, da se prilega vsebini, vendar ne bo nikoli presegel določene največje velikosti.

            fit-content(max-size)

            

              
                Copy
              
            
          

Kako deluje fit-content()

Funkcija fit-content() izračuna velikost grid tracka glede na vsebino v njem. Vendar pa zagotavlja, da velikost tracka nikoli ne preseže največje velikosti, določene v argumentu funkcije.

Primer: Omejevanje širitve stolpca

Razmislite o postavitvi, kjer želite, da se stolpec razširi, da se prilega vsebini, vendar ne želite, da postane preširok:

            .grid-container {
  display: grid;
  grid-template-columns: 100px fit-content(300px) 1fr;
}

            

              
                Copy
              
            
          

V tem primeru se bo drugi stolpec razširil, da se prilega vsebini, vendar ne bo nikoli presegel širine 300px. Če vsebina zahteva več kot 300px, bo stolpec prirezan pri 300px (razen če ste nastavili overflow: visible na elementu grida). Prvi stolpec ohranja fiksno širino, končni stolpec pa dobi preostali prostor kot frakcijo.

Primer: Nadzor višine vrstic

fit-content() lahko uporabite tudi za vrstice, da nadzirate njihovo višino:

            .grid-container {
  display: grid;
  grid-template-rows: fit-content(200px) 1fr;
}

            

              
                Copy
              
            
          

Tukaj se bo prva vrstica razširila, da se prilega vsebini, vendar ne bo nikoli presegla višine 200px. Druga vrstica bo zavzela preostali prostor kot frakcijo skupne razpoložljive višine.

Praktična uporaba: Odzivna postavitev kartice

fit-content() je uporaben za ustvarjanje odzivnih postavitev kartic, kjer želite, da se kartice razširijo, da se prilegajo svoji vsebini, vendar želite omejiti njihovo širino:

            .grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, fit-content(300px)));
  grid-gap: 10px;
}

.card {
  /* Slogi kartice */
}

            

              
                Copy
              
            
          

Ta koda ustvari odzivno postavitev kartic, kjer je vsaka kartica široka vsaj 200px in se lahko razširi, da se prilega svoji vsebini, do največ 300px. repeat(auto-fit, ...) zagotavlja, da se kartice na manjših zaslonih zavijejo v naslednjo vrstico. Znotraj funkcije repeat, uporaba minmax skupaj s fit-content zagotavlja še višjo stopnjo nadzora - zagotavlja, da bodo imeli elementi vedno minimalno širino 200px, hkrati pa nikoli ne bodo širši od 300px (ob predpostavki, da vsebina znotraj tega ne presega te vrednosti). Ta strategija je še posebej dragocena, če želite dosleden videz v različnih velikostih zaslona. Ne pozabite oblikovati razreda .card z ustreznimi polnili, robovi in ​​drugimi vizualnimi lastnostmi, da dosežete želeni videz.

Kombiniranje funkcij tracka za napredne postavitve

Resnična moč funkcij CSS Grid tracka prihaja iz njihove kombinacije za ustvarjanje zapletenih in dinamičnih postavitev. S strateško uporabo fr, minmax(), auto in fit-content() lahko dosežete široko paleto odzivnih in prilagodljivih zasnov.

Primer: Mešane enote in funkcije

Razmislite o postavitvi s stransko vrstico fiksne širine, prilagodljivim območjem glavne vsebine in stolpcem, ki se razširi, da se prilega svoji vsebini, vendar ima največjo širino:

            .grid-container {
  display: grid;
  grid-template-columns: 200px 1fr fit-content(400px);
}

            

              
                Copy
              
            
          

V tem primeru je prvi stolpec fiksiran pri 200px. Drugi stolpec zavzame preostali prostor z uporabo 1fr. Tretji stolpec se razširi, da se prilega vsebini, vendar je omejen na največjo širino 400px z uporabo fit-content(400px).

Primer: Zapleteno odzivno oblikovanje

Ustvarimo bolj zapleten primer postavitve spletne strani z glavo, stransko vrstico, glavno vsebino in nogom:

            .grid-container {
  display: grid;
  grid-template-columns: minmax(150px, 250px) 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  height: 100vh;
}

header {
  grid-area: header;
  /* Slogi glave */
}

.sidebar {
  grid-area: sidebar;
  /* Slogi stranske vrstice */
}

main {
  grid-area: main;
  /* Slogi glavne vsebine */
}

footer {
  grid-area: footer;
  /* Slogi noge */
}

            

              
                Copy
              
            
          

V tej postavitvi:

• grid-template-columns določa dva stolpca: stransko vrstico z minimalno širino 150px in največjo širino 250px ter območje glavne vsebine, ki zavzame preostali prostor z uporabo 1fr.
• grid-template-rows določa tri vrstice: glavo in nogo, ki samodejno prilagodita svojo višino, da se prilegajo vsebini (auto), in območje glavne vsebine, ki zavzame preostali navpični prostor z uporabo 1fr.
• Lastnost grid-template-areas določa strukturo postavitve z uporabo imenovanih grid območij.

Ta primer prikazuje, kako kombinirati funkcije trackov in območja grid, da ustvarite prilagodljivo in odzivno postavitev spletne strani. Ne pozabite dodati ustreznih slogov za vsak odsek (glava, stranska vrstica, main, noga), da zagotovite pravilno vizualno predstavitev.

Najboljše prakse za uporabo funkcij CSS Grid trackov

Če želite kar najbolje izkoristiti funkcije CSS Grid tracka, upoštevajte naslednje najboljše prakse:

• Dajte prednost vsebini: Pri določanju velikosti trackov vedno dajte prednost vsebini. Postavitev se mora prilagoditi vsebini, ne obratno.
• Uporabite minmax() za odzivnost: Uporabite minmax() za določitev obsega sprejemljivih velikosti za grid tracke, s čimer zagotovite, da se prilagajajo različnim velikostim zaslona in variacijam vsebine.
• Strateško kombinirajte funkcije: Kombinirajte funkcije trackov, da ustvarite zapletene in dinamične postavitve. Na primer, skupaj uporabite minmax() in fr, da ustvarite prilagodljive stolpce, ki imajo omejitve minimalne in maksimalne širine.
• Testirajte na različnih napravah: Vedno preizkusite svoje postavitve na različnih napravah in velikostih zaslona, ​​da zagotovite, da so odzivne in vizualno privlačne.
• Upoštevajte dostopnost: Zagotovite, da so vaše postavitve dostopne vsem uporabnikom, vključno s tistimi s posebnimi potrebami. Uporabite semantični HTML in zagotovite nadomestno besedilo za slike.
• Uporabite orodja Grid Inspector: Večina sodobnih brskalnikov ima vgrajena orodja Grid Inspector, ki vam lahko pomagajo vizualizirati in odpraviti napake v svojih grid postavitvah. Ta orodja so lahko neprecenljiva za razumevanje, kako funkcije trackov vplivajo na vašo postavitev.

Globalni vidiki za CSS Grid

Pri razvoju spletnih strani za globalno občinstvo je pomembno upoštevati kulturne razlike in regionalne različice. Tukaj je nekaj premislekov, značilnih za CSS Grid:

• Smer postavitve (lastnost direction): Lastnost direction se lahko uporabi za spremembo smeri postavitve grid. Na primer, v jezikih z desno proti levi (RTL), kot sta arabščina in hebrejščina, lahko nastavite direction: rtl;, da obrnete smer postavitve. CSS Grid se samodejno prilagaja smeri postavitve in zagotavlja pravilno prikazovanje postavitve v različnih jezikih.
• Logične lastnosti (inset-inline-start, inset-inline-end itd.): Namesto uporabe fizičnih lastnosti, kot sta left in right, uporabite logične lastnosti, kot sta inset-inline-start in inset-inline-end. Te lastnosti se samodejno prilagajajo smeri postavitve in zagotavljajo doslednost postavitve v jezikih LTR in RTL.
• Velikosti pisav: Bodite pozorni na velikosti pisav, ki se uporabljajo v vaših grid elementih. Različni jeziki lahko zahtevajo različne velikosti pisav za optimalno berljivost. Razmislite o uporabi relativnih enot, kot sta em ali rem, da omogočite skaliranje velikosti pisav na podlagi uporabnikovih preferenc.
• Formati datumov in števil: Če vaša postavitev grid vključuje datume ali številke, jih formatirajte pravilno za uporabnikovo lokalno nastavitev. Uporabite JavaScript ali knjižnico na strani strežnika za formatiranje datumov in števil v skladu z jezikovnimi in regionalnimi nastavitvami uporabnika.
• Slike in ikone: Upoštevajte, da imajo lahko nekatere slike in ikone v različnih kulturah različne pomene ali konotacije. Izogibajte se uporabi slik ali ikon, ki bi lahko bile žaljive ali kulturno neobčutljive. Na primer, kretnja z roko, ki se v eni kulturi šteje za pozitivno, se lahko v drugi kulturi šteje za žaljivo.
• Prevod in lokalizacija: Če je vaše spletno mesto na voljo v več jezikih, poskrbite za prevod vsega besedila znotraj vaše postavitve grid, vključno z naslovi, oznakami in vsebino. Razmislite o uporabi sistema za upravljanje prevodov, da poenostavite postopek prevajanja in zagotovite doslednost v različnih jezikih.

Zaključek

Funkcije CSS Grid track so bistvena orodja za ustvarjanje dinamičnih in odzivnih postavitev, ki se prilagajajo različnim velikostim zaslona in variacijam vsebine. Z obvladovanjem fr, minmax(), auto in fit-content() lahko ustvarite zapletene in prilagodljive postavitve, ki zagotavljajo dosledno in privlačno uporabniško izkušnjo na vseh napravah in platformah. Ne pozabite dati prednost vsebini, uporabiti minmax() za odzivnost, strateško kombinirati funkcije in testirati na različnih napravah, da zagotovite, da so vaše postavitve vizualno privlačne in dostopne vsem uporabnikom. Z upoštevanjem globalnih premislekov glede jezika in kulture lahko ustvarite spletne strani, ki so dostopne in privlačne za globalno občinstvo.

Z vajo in eksperimentiranjem lahko izkoristite vso moč funkcij CSS Grid track in ustvarite osupljive in odzivne postavitve, ki izboljšajo vaše spletno razvojne veščine in zagotovijo boljšo uporabniško izkušnjo za vaše občinstvo.